<template>
  <div class="keycode-container">
    <h1 class="title">Keycode 信息</h1>
    <div class="description">按下任意键以获取该按键的信息</div>

    <div v-if="hasKeyInfo" class="keycode-info">
      <div class="key-display">
        {{ displayKey }}
      </div>

      <div class="info-grid">
        <div class="info-item">
          <div class="label">按键:</div>
          <div class="value">{{ keyInfo.key }}</div>
          <button class="copy-btn" @click="copyToClipboard(keyInfo.key)">
            <CopyOutlined />
          </button>
        </div>

        <div class="info-item">
          <div class="label">键码:</div>
          <div class="value">{{ keyInfo.keyCode }}</div>
          <button class="copy-btn" @click="copyToClipboard(keyInfo.keyCode)">
            <CopyOutlined />
          </button>
        </div>

        <div class="info-item">
          <div class="label">代码:</div>
          <div class="value">{{ keyInfo.code }}</div>
          <button class="copy-btn" @click="copyToClipboard(keyInfo.code)">
            <CopyOutlined />
          </button>
        </div>

        <div class="info-item">
          <div class="label">位置:</div>
          <div class="value">{{ keyInfo.location }}</div>
          <button class="copy-btn" @click="copyToClipboard(keyInfo.location)">
            <CopyOutlined />
          </button>
        </div>

        <div class="info-item">
          <div class="label">修饰键:</div>
          <div class="value">{{ modifiers }}</div>
          <button class="copy-btn" @click="copyToClipboard(modifiers)">
            <CopyOutlined />
          </button>
        </div>
      </div>
    </div>

    <div v-else class="placeholder">按下任意键查看信息</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useEventListener } from '@vueuse/core'
import { message } from 'ant-design-vue'
import { CopyOutlined } from '@ant-design/icons-vue'

const keyInfo = ref({
  key: 'Enter',
  keyCode: 13,
  code: 'Enter',
  location: 0,
  altKey: false,
  ctrlKey: false,
  shiftKey: false,
  metaKey: false
})

const hasKeyInfo = computed(() => keyInfo.value.key !== '')

const displayKey = computed(() => {
  if (!keyInfo.value.key) return ''
  return keyInfo.value.key === ' ' ? 'Space' : keyInfo.value.key
})

const modifiers = computed(() => {
  const mods = []
  if (keyInfo.value.altKey) mods.push('Alt')
  if (keyInfo.value.ctrlKey) mods.push('Ctrl')
  if (keyInfo.value.shiftKey) mods.push('Shift')
  if (keyInfo.value.metaKey) mods.push('Meta')
  return mods.join(' + ') || 'None'
})

// 监听键盘事件
useEventListener('keydown', (e) => {
  e.preventDefault()
  keyInfo.value = {
    key: e.key,
    keyCode: e.keyCode,
    code: e.code,
    location: e.location,
    altKey: e.altKey,
    ctrlKey: e.ctrlKey,
    shiftKey: e.shiftKey,
    metaKey: e.metaKey
  }
})

// 复制到剪贴板
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text.toString())
    message.success('已复制到剪贴板')
  } catch (err) {
    message.error('复制失败')
  }
}
</script>

<style scoped>
.keycode-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.title {
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
}

.description {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
}

.keycode-info {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 2rem;
}

.key-display {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 2rem;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.label {
  font-weight: bold;
  margin-right: 0.5rem;
  color: #666;
  width: 70px;
}

.value {
  flex: 1;
  color: #333;
}

.copy-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.copy-btn:hover {
  color: #1890ff;
}

.placeholder {
  text-align: center;
  color: #999;
  font-size: 1.5rem;
  padding: 4rem;
  background: #f5f5f5;
  border-radius: 8px;
}
</style>
